<template>
  <div class="searchpage">
    <!-- 头部搜索框 -->
    <van-sticky>
      <header-input></header-input>
    </van-sticky>
      
       <van-list class="vanList" v-if="list !== undefined" v-model="loading" :finished="finished" finished-text="没有更多了"> 
    
        <van-card :title="p.title" v-for="(p,i) in list" :key="i" :thumb="`/cook_img/${p.pic}`" @click="detail(p.bid)">
          <template #tags class="author">
            <div>
              <van-tag plain type="danger">9.0分</van-tag>
              <van-tag plain type="danger">79人做过</van-tag>
            </div>
            <div class="tags">{{p.describe}}</div>
            <div class="author_div">
              <van-image class="author_img" round :src="`/author_img/${p.upic}`" width="20px" height="20px"></van-image>
              <span>{{p.uname}}</span>
            </div>
          </template>
        </van-card>
    </van-list>
    <van-empty v-else image="search" description="找不到您想要的菜谱" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      page: 0,
      list: [],
      rate:'',
      // keyword:this.$route.query.keyword,
      loading: false,
      finished: false,
    };
  },
  methods: {
    getSearch(keyword) {
      this.axios.get(`/search?keyword=${keyword}`).then((result) => {
        this.list = result.data.data;
        console.log(this.list[0]);

        this.finished = true;
      });
    },
    detail(bid) {
      this.$router.push(`/cookBook?bid=${bid}`);
    },
  },
  mounted() {
    window.scrollTo(0, 0);
    let keyword = this.$route.query.keyword;
    console.log(keyword);
    this.getSearch(keyword);
  },
};
</script>
<style scoped>
.van-tag--danger.van-tag--plain {
  color: #ff8833;
}
.van-card__thumb img {
  width: 100px;
  height: 100px;
}
.van-card__title {
  margin-top: 3px;
  font-weight: 700;
  font-size: 15px;
  overflow : hidden;
  text-overflow : ellipsis;
  display : -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.tags {
  display: inline-flex;
  border-radius: 5px;
  margin-bottom: 20px;
  margin-top: 5px;
  line-height: 20px;
  overflow : hidden;
  text-overflow : ellipsis;
  display : -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.van-tag--plain {
  margin-right: 5px;
  margin-top: 10px;
}
.author_img {
  vertical-align: middle;
  margin-right: 5px;
}
.van-card__thumb {
  width: 120px;
  height: 120px;
  border-radius: 5px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
}
.van-card__content {
  position: relative;
}
.author_div {
  position: absolute;
  bottom: 3px;
}
</style>
